<template>
  <div>
    <div>111</div>
    <iframe
      id="iFrame"
      src="/7.pdf"
      frameborder="0"
      width="300px"
      height="800px"
      allowfullscreen="true"
    ></iframe>
  </div>
</template>

<script>
var IframeOnClick = {  
            resolution: 200,  
            iframes: [],  
            interval: null,  
            Iframe: function() {  
                this.element = arguments[0];  
                this.cb = arguments[1];   
                this.hasTracked = false;  
            },  
            track: function(element, cb) {  
                this.iframes.push(new this.Iframe(element, cb));  
                if (!this.interval) {  
                    var _this = this;  
                    this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);  
                }  
            },  
            checkClick: function() {  
                if (document.activeElement) {
                    var activeElement = document.activeElement;
                    for (var i in this.iframes) {  
                        if (activeElement === this.iframes[i].element) { 
                            document.activeElement.blur();
                            // 如果点击的是这个iframe 这个iframe处于未被点击的状态
                            if (this.iframes[i].hasTracked == false) {   
                                // 标记为被点击并等待下一次点击
                                this.iframes[i].hasTracked = true;  
                                // 如果200毫秒内没有被在此点击重置次状态
                                this.iframes[i].setTimeout = setTimeout(function(iframe) {
                                    iframe.hasTracked = false;
                                }, 500, this.iframes[i] );
                            } else {
                              console.log("事件触发")
                                // 如果判断这个已经是被点击的状态了
                                // 清除掉等待事件
                                clearTimeout(this.iframes[i].setTimeout);
                                // 修改为未选择状态
                                this.iframes[i].hasTracked = false;
                                // 触发事件
                                this.iframes[i].cb.apply(window, []);   
                            }
                        } else {  
                            this.iframes[i].hasTracked = false;  
                        }  
                    }  
                }
            }
        };  
        
export default {
    name:'test',
    data(){
        return{
                PDFsrc:'',
                fullscreen:false,
        }
    },
    mounted(){
         IframeOnClick.track(document.getElementById("iFrame"), ()=> { this.screen() });
    },
    methods: {
        screen() {
      //设置后就是id==con_lf_top_div 的容器全屏
      let outBox= document.getElementById('iFrame')
      if (this.fullscreen) {
         this.fullscreen=false;
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
         this.fullscreen=true;
        if (outBox.requestFullscreen) {
          outBox.requestFullscreen()
        } else if (outBox.webkitRequestFullScreen) {
          outBox.webkitRequestFullScreen()
        } else if (outBox.mozRequestFullScreen) {
          outBox.mozRequestFullScreen()
        } else if (outBox.msRequestFullscreen) {
          // IE11
          outBox.msRequestFullscreen()
        }
      }
    }
    } 
} 
</script>

<style>
</style>